<html>
<head>
<title>Investment Property Calculator</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="width" />
<link rel="stylesheet" type="text/css" href="../common/style.css" />
<style>
input{text-align:right;display:table-cell;width:100%;}
table{width:100%;border-collapse:collapse;margin-top:8px;border:1px solid grey;}
tr{border-bottom:1px solid lightgrey;}
td{white-space:nowrap;padding:0px 2px;}
td:nth-child(2){width:8px;}
td:nth-child(3){text-align:right;}
td:nth-child(4){width:24px;}
#h1{font-weight:bold;text-align:center;display:inline-block;width:100%;}
#rating{display:block;width:100%;text-align:center;	}
</style>
<script type='text/javascript' src='../common/jquery-min.js'></script>
<script>
var config = {
	inputs: [
		{name:"house", 		label:"Property Value",	unitspre:'$', unitspost:',000', init:'', multiplier:1000},
		{name:"rent", 		label:"Rent Value", 	unitspre:'$', unitspost:'/wk', init:'', multiplier:52},
		{name:"strata", 	label:"Strata", 		unitspre:'$', unitspost:'/qtr', init:'', multiplier:-4},
		{name:"water", 		label:"Water", 			unitspre:'$', unitspost:'/qtr', init:'', multiplier:-4},
		{name:"council", 	label:"Council", 		unitspre:'$', unitspost:'/qtr', init:'', multiplier:-4},
		{name:"size", 		label:"Size", 			unitspre:'',  unitspost:'m&sup2;', init:'', multiplier:1},
		{name:"mortgage", 	label:"Mortgage Amount",unitspre:'$', unitspost:',000', init:'', multiplier:-1000},
		{name:"mortgageint",label:"Mortgage Interest Rate", unitspre:'', unitspost:'%', init:'5.9', multiplier:0.01}
	],
	outputs: [
		{name:"ionly", 					label:"Mortgage (IntOnly)",   unitspre:'$', unitspost:'/yr', init:'0.0'},
		{name:"incomingsAndOutgoings",	label:"Total In/Out",		unitspre:'$', unitspost:'/yr', init:'0.0'},
		{name:"percent", 				label:"Return Percentage", 	unitspre:'',  unitspost:'%', init:'0.0'},
		{name:"rating", 				label:"Rating", 			unitspre:'',  unitspost:'', init:'-'},
		{name:"valpersqm", 				label:"Cost Per SQM", 				unitspre:'$', unitspost:'/m&sup2;', init:'0.0'}
	]
}
$(document).ready(function(){
	build('inputs', config.inputs, true)
	build('outputs', config.outputs, false)
	$('input').focus(function(){this.select()})
		.keydown(function(e) {
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0
			if(key == 13) {
				e.preventDefault()
				var inputs = $(this).closest('body').find(':input:visible')
				inputs.eq( inputs.index(this)+ 1 ).focus()
			}
		}
	)
	$('#house').focus()
})
function build(tableId, fields, boolInputs){
	var table = $('#'+tableId)
	$.each(fields, function(idx, input){
		var tr = $('<tr>').appendTo(table)
		tr.append($('<td>').append($('<label>').html(input.label)))
		tr.append($('<td>').append($('<label>').html(input.unitspre)))
		if (boolInputs){
			tr.append($('<td>').append(
				$('<input>').attr('id',input.name).attr('type','number').attr('pattern','-?\d*\.?\d*').val(input.init).change(recalc).keyup(recalc)
			))
		} else {
			tr.append($('<td>').append($('<label>').attr('id',input.name).html(input.init)))
		}
		tr.append($('<td>').append($('<label>').html(input.unitspost)))
	})
}
function recalc(){
	var inv = []
	$.each(config.inputs, function(idx, input){
		inv[input.name] = $('#'+input.name).val() * config.inputs[idx].multiplier
	})
	//console.debug(inv)
	var notapplicable = 'N/A'
	var mortgageRepaymentsPerYr = inv.mortgage*inv.mortgageint
	var incomingsPerYr = inv.rent
	var outgoingsPerYr = inv.strata + inv.council + inv.water + mortgageRepaymentsPerYr
	var inAndOutPerYear = incomingsPerYr + outgoingsPerYr
	var percent = inAndOutPerYear/inv.house*100
	$('#ionly').html(curr(mortgageRepaymentsPerYr)).css('color','red')
	$('#incomingsAndOutgoings').html(curr(inAndOutPerYear)).css('color',inAndOutPerYear >= 0 ? 'black' : 'red')
	$('#percent').html(percent.toFixed(2)).css('color',inAndOutPerYear > -1 ? 'black' : 'red')
	$('#valpersqm').html(curr(inv.house/inv.size))
	// ---
	$('#rating').html(percent > 6 ? "Very Good" : percent > 3 ? "Good" : percent >= 0 ? "Average" : "Poor")
				.css('background-color', percent > 6 ? "green" : percent > 3 ? "yellow" : percent >= 0 ? "orange" : "red")
}
function curr(number){
	return Number(number.toFixed(2)).toLocaleString("en-AU", {style: "currency", currency: "AUD", minimumFractionDigits: 2})
}
</script>
</head>
<body>
<label id="h1">Investment Property Calculator</label>
<table id="inputs" />
<table id="outputs" />
</body></html>
